<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_VER_USUARIOS">
<head>
	
</head>
<body>
	<h3><spring:message code="etiqueta.gestionUsuarios" text="Gestión de usuarios" /></h3>
	
	<div class="filtro">
		<label class="horizontal"><spring:message code="etiqueta.filtrar" text="Filtrar por" /></label>
		<input class="horizontal" type="text" id="filtrado" autofocus="autofocus" />
		<span></span>
	</div>
	
	<div class="listado horizontal"></div>
	
	<div class="reportes">
		<span><spring:message code="etiqueta.exportar" text="Exportar a" /></span>
		<button onclick="javascript:xls();"><spring:message code="etiqueta.xls" text="XLS" /></button>
		<button onclick="javascript:pdf();"><spring:message code="etiqueta.pdf" text="PDF" /></button>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		var datos = [];
		var tabla;
		var cabezales = [
   			'<spring:message code="etiqueta.usuario" text="Usuario" />',
   			'<spring:message code="etiqueta.apellido" text="Apellido" />',
   			'<spring:message code="etiqueta.primerNombre" text="Primer nombre" />',
   			'<spring:message code="etiqueta.rol" text="Rol" />',
   			'<spring:message code="etiqueta.estado" text="Estado" />',
   			'<spring:message code="etiqueta.ultimoLogin" text="Último login" />',
   			'<spring:message code="etiqueta.telefono" text="Teléfono" />',
   			'<spring:message code="etiqueta.celular" text="Celular" />',
   			''
   		];
	
		jQuery(document).ready(function(){	
   			actualizar();

   			jQuery('#filtrado').on('keyup', function (event) {
   			  	var value = ('' + this.value).toLowerCase(), row, col;
   			 	var filtro = [], registros;
   			 	if (value) {
   			    	for (row = 0; row < datos.length; row++) {
   	   			    	var fila = datos[row];
   	   			  		var incluido = false;
   			      		for (col = 0; col < fila.length; col++) {
   			      			var texto = '' + datos[row][col];
   			      			if ((texto).toLowerCase().indexOf(value) > -1) {
   	   			      			if(incluido == false) {
   	   			      				filtro.push(fila);
   	   			      				incluido = true;
   	   	   			      		}
   			      			}
	  			      	}
   			    	}
   			    	registros = filtro.length;
   			    	tabla.handsontable('loadData', filtro);
   			  	} else {
   			  		registros = datos.length;
   			  		tabla.handsontable('loadData', datos);
   	   			}
   			 	mensajeListado(registros);
   			});
   			
   			jQuery('button').button();
   		});

   		function actualizar() {
   			jQuery.ajax(
			    {
			        url: "usuarios.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        data:{
				        accion: 'LISTAR'
				    },
			        dataType: 'json'
			    }
			).done(
	   			function(usuarios) {
	   				datos = [];

	   				//Datos
		   			if(usuarios.length > 0){
	       				jQuery.each(usuarios, function(index, value){
	       					var usuario = jQuery(value)[0];
	       					var id = usuario.id;
	       					var bloqueado = usuario.bloqueado;
	       					var estado = '';
	       					if(bloqueado) {
		       					estado = '<spring:message code="etiqueta.estado.BLOQUEADO" text="Bloqueado" />';
		       				} else {
		       					estado = '<spring:message code="etiqueta.estado.DESBLOQUEADO" text="Desbloqueado" />';
			       			}
	       					
		       				datos.push([
								tooltip(usuario.usuario, 0, 30),
								jQuery.trim(usuario.apellido),
								jQuery.trim(usuario.primerNombre),
								tooltip(usuario.rol.nombre, 0, 10),
								estado,
								jQuery.trim(usuario.ultimoLogin),
								jQuery.trim(usuario.telefono),
								jQuery.trim(usuario.celular),
								links(id, bloqueado)
		    		       	]);
	       				});
		   			}

		   			mensajeListado(datos.length);

		   			tabla = $(".listado").handsontable(
	   	   		   		{
	   	   		   			autoWrapRow: true,
	   	   		   			colHeaders : cabezales,
	   	   		   			colWidths : [150, 80, 80, 90, 100, 150, 95, 95, 280],
			   	   		   	columns: [
			   	   		   	    {data: 0, type: {renderer: textoHtml}},
			   	   		   	    {data: 1},
			   	   		   	    {data: 2},
			   	   		   	    {data: 3, type: {renderer: textoHtml}},
			   	   		   	    {data: 4},
			   	   		   	    {data: 5},
			   	   		  		{data: 6},
			   	   		   	    {data: 7},
			   	   		  		{data: 8, type: {renderer: textoHtml}}
			   	   		   	  ],
	   	   		   			columnSorting : true,
	   	   		   			contextMenu : false,
	   	   		   			currentRowClassName : 'seleccionado',
	   	   	   		   		data: datos,
	   	   	   		   		maxCols : 9,
	   	   	   				minCols : 9,
	   	   	   		  		stretchH: 'last'
	   	   	   		   	}
	   	   	   		);
   		   		}
   		   	);
   	   	}

   	   	function links(id, bloqueado) {
   	   	   	var texto = 
   	   	   	   	'<span class="link">' + 
   	   	   	   		'<a class="link-accion" href="javascript:redirige(&quot;usuarios.do?accion=ACTUALIZAR&id=' + id + '&quot;);"><spring:message code="etiqueta.ver" text="Ver" /></a>' +
   	   	   	   	'</span>';

   	   	  	texto += '<span class="link">';
   	  		<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_USUARIO">
   	  		texto += '<a class="link-accion" href="javascript:redirige(&quot;usuarios.do?accion=CREDENCIALES&id=' + id + '&quot;);"><spring:message code="etiqueta.credenciales" text="Credenciales" /></a>';
   	  		</secured:authorize>
   	  		texto += '</span>';

   	  		texto += '<span class="link">';
   	  		<secured:authorize ifAnyGranted="ROLE_BLOQUEAR_USUARIO">
   	  		if(id != <secured:authentication property="principal.usuario.id" />) {
   	   	  		if(bloqueado) {
   	   	  			texto += '<a class="link-accion" href="javascript:bloqueo(' + id + ", " + bloqueado + ');"><spring:message code="etiqueta.desbloquear" text="Desbloquear" /></a>';
   	   	   	  	} else {
   	   	   			texto += '<a class="link-accion" href="javascript:bloqueo(' + id + ", " + bloqueado + ');"><spring:message code="etiqueta.bloquear" text="Bloquear" /></a>';
   	   	   	   	}
   	  		}
	  		</secured:authorize>
	  		texto += '</span>';

	  		texto += '<span class="link">';
	  		<secured:authorize ifAnyGranted="ROLE_ELIMINAR_USUARIO">
	  		if(id != <secured:authentication property="principal.usuario.id" />) {
	  			texto += '<a class="link-accion" href="javascript:eliminar(' + id + ');"><spring:message code="etiqueta.eliminar" text="Eliminar" /></a>';
	  		}	  		
	  		</secured:authorize>
	  		texto += '</span>';

   	   	   	return texto;
   	   	}
   		
   		<secured:authorize ifAnyGranted="ROLE_BLOQUEAR_USUARIO">
		function bloqueo(id, bloqueado) {
			jQuery.ajax(
       			{
       				url:'usuarios.json?accion=' + (bloqueado ? 'DESBLOQUEAR' : 'BLOQUEAR') + '&&id=' + id,
       				cache: false,
       				dataType: 'json'
            	}
           	).done(
                function(texto){
           			actualizar();
            	}
            );
		}
   		</secured:authorize>

   		<secured:authorize ifAnyGranted="ROLE_ELIMINAR_USUARIO">
		function eliminar(id) {
			jQuery.ajax(
				{
           			url: "usuarios.json?accion=ELIMINAR&&id" + id,
           			cache: false,
           			dataType: 'json'
           		}
	        ).done(
	    	    function(texto){
           			actualizar();
            	}
            );
		}
   		</secured:authorize>   		

   		function xls() {
   	   		var headers = jQuery.toJSON(tabla.handsontable('getColHeader')).toString();
			var datos = jQuery.toJSON(tabla.handsontable('getData')).toString();
   	   		 
			reporte('XLS', 'USUARIOS', headers, datos);
   	   	}

   	   	function pdf() {
	   	   	var headers = jQuery.toJSON(tabla.handsontable('getColHeader')).toString();
			var datos = jQuery.toJSON(tabla.handsontable('getData')).toString();
		   		 
			reporte('PDF', 'USUARIOS', headers, datos);
   	   	}
    </script>
</body>
</secured:authorize>